<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script>
      <script>
  $(function(){
  var ani = $("#ani");
	$('.weui_btn').click(function(){	
		
		 if(ani.hasClass($(this).data('ani'))){
		ani.removeClass();
		 }else{
		 ani.addClass($(this).data('ani')+"  animated checked");
		 
		 }
	})

	  
	  });    
      
      </script>
</head>

<body ontouchstart style="background-color: #f8f8f8;">
 <div class="weui-header bg-blue"> 
  <div class="weui-header-left"> <a class="icon icon-109 f-white">返回</a>  </div>
   <h1 class="weui-header-title">我们都爱小电影</h1>
    <div class="weui-header-right"><a class="icon icon-83 f-white">更多</a></div> 
    </div>

<br>
  <div class="bg-orange weui-header "> 
  <div class="weui-header-left"> <a class="icon icon-109 f-white"></a>  </div>
   <h1 class="weui-header-title">千里中国心</h1>
    <div class="weui-header-right"><a class="icon icon-22 f-white"></a></div> 
    </div>  
    <br>
    
      <div class="weui_btn_primary weui-header "> 
  <div class="weui-header-left"> <a class="icon icon-109 f-white"></a>  </div>
   <h1 class="weui-header-title">清朝是历史的倒退</h1>
    <div class="weui-header-right"><a class="icon icon-22 f-white"></a></div> 
    </div> 
    <br> 
      <div class="weui_btn_warn weui-header "> 
  <div class="weui-header-left"> <a class="icon icon-109 f-white"></a>  </div>
   <h1 class="weui-header-title">孔融是个假道学</h1>
    <div class="weui-header-right"><a class="icon icon-22 f-white"></a></div> 
    </div>     
   <br> 
      <div class="weui_btn_default weui-header "> 
  <div class="weui-header-left"> <a class="icon icon-109 f-green"></a>  </div>
   <h1 class="weui-header-title f-green">三国是一部精彩历史</h1>
    <div class="weui-header-right"><a class="icon icon-108 f-green"></a></div> 
    </div>  
<div class="page-hd">
            <div class="weui-reddot">默认红点</div>
            <div class="weui-reddot-border">白边框红点</div>
            <div class="weui-reddot-s">小红点</div>
            <i class="weui-reddot weui-reddot-static"></i>开头
           <div class="weui_cells_title">红色,上标,标记图标<span class="icon icon-3 f20 f-green btn"></span><sup><span class="weui-badge">1</span></sup></div>
            <div class="weui_cells_title">小红点 比较大<span class="weui-badge weui-badge-dot" style="margin-left: 5px;margin-right: 5px;"></span></div>
  <div class="weui_cells_title">徽标<span class="weui-badge" style="margin-left: 5px;">8</span></div>
  <div class="weui_cells_title">徽标<span class="weui-badge" style="margin-left: 5px;">812</span></div>
  <div class="weui_cells_title">徽标<span class="weui-badge" style="margin-left: 5px;">New</span></div>
</div>

        <div class="weui_cells">
            <div class="weui_cell">
                <div class="weui_cell_hd" style="position: relative;margin-right: 10px;">
                    <img src="" style="width: 50px;display: block"/>
                    <span class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">8</span>
                </div>
                <div class="weui_cell_bd">
                    <p>联系人名称</p>
                    <p style="font-size: 13px;color: #888888;">摘要信息</p>
                </div>
            </div>
            </div>
            
 <div id="ani" style="width:50px;height:50px;font-size:18px;background:#04b567;opacity:0.5;border-radius:50%;"><i class="icon icon-99 f45"></i></div>
 
         <div class="page-hd">
<button data-ani="swing" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">swing</button>
<button data-ani="shake" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">shake</button>
<button data-ani="xz360" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">xz360</button>
<button data-ani="xz360 reverse" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">反向reverse</button>
<button data-ani="fadeIn" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">淡入用于显示fadeIn</button>
<button data-ani="fadeOut" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">淡出 用于隐藏fadeOut</button>
<button data-ani="pulse" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">pulse</button>
<button data-ani="rotateIn" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">rotateIn</button>

<button data-ani="slideIn" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">slideIn</button>
<button data-ani="slideOut" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">slideOut</button>
.weui-loading<span class="weui-loading"></span>

</div>            
</body>
</html>
